<template>
  <template v-for="(item, index) in props.columns" :key="new Date().getTime()">
    <el-table-column
      v-if="item.checked && item.children.length <= 0"
      :type="item.type"
      :prop="item.prop"
      :label="item.label"
      :align="item.align"
      :header-align="item.headerAlign"
      :width="item.width"
      :min-width="item.minWidth"
      :sortable="item.sortable"
      :formatter="item.formatter"
      :show-overflow-tooltip="item.tooltip"
      :fixed="item.fixed"
    >
      <template #default="scope">
        <span v-if="item.formatter">{{ item.formatter(scope.row) }}</span>
        <slot
          v-else-if="item.slot"
          :name="item.slot"
          :row="scope.row"
          :index="scope.$index"
        />
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="item.checked && item.children.length > 0"
      :label="item.label"
      :align="item.align"
      :header-align="item.headerAlign"
      :width="item.width"
      :min-width="item.minWidth"
      :sortable="item.sortable"
      :formatter="item.formatter"
      :show-overflow-tooltip="item.tooltip"
    >
      <el-table-column
        v-for="(itemc, indexc) in item.children"
        :prop="itemc.prop"
        :label="itemc.label"
        :align="itemc.align"
        :header-align="itemc.headerAlign"
        :width="itemc.width"
        :sortable="itemc.sortable"
        :key="indexc"
        :fixed="itemc.fixed"
      >
      </el-table-column>
    </el-table-column>
  </template>
</template>

<script lang="ts" setup>
import { reactive, defineProps, onMounted, watch } from "vue";
import columnChild from "./column.vue";
interface column {
  type: string;
  prop: string;
  label: string;
  align: string;
  width: any;
  minWidth: any;
  sortable: boolean;
  formatter: any;
  showOverfolwTooltip: boolean;
  slot: string;
}

const props = defineProps({
  columns: {
    type: Array,
    default: [],
  },
});
const state = reactive({
  columns: [],
});

onMounted(() => {});
</script>